<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>档案接收</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="../../css/fileMange.css">
    <link rel="stylesheet" href="../../iconfont/iconfont.css">
</head>

<body>
    <div class="bodyBox">

        <!-- 头部 -->
        <div class="header">
            <form class="layui-form rightBtnBox" action="">
                <div class="inputBox">
                    <div class="layui-form-item item1">
                        <div class="layui-input-block">
                            <select name="" lay-filter="" class="se_retire">
                                <option value="2">是否退休</option>
                                <option value="0">是</option>
                                <option value="1">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item item1">
                        <div class="layui-input-block">
                            <select name="jzg" lay-filter="" class="se_jzg">
                                <option value="2">是否军转干</option>
                                <option value="0">是</option>
                                <option value="1">否</option>
                            </select>
                        </div>
                    </div>
                    <input type="text" class="layui-input seinputBox" placeholder="请输入姓名或身份证号" autocomplete="off"
                        name="username" id="username">
                </div>

                <div class="rightBtn">
                    <div type="button" class="btn  layui-btn searchBtn" id="btnSeach">
                        <i class="iconfont">
                            &#xe614;
                        </i>
                        搜索
                    </div>
                </div>
            </form>

        </div>

        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableId">

        </table>
        <div style="display: none;" id="toolbarTpl">
            <button type="button" class="layui-btn1 layui-btn-sm add jobBtn " lay-event="zaizhi">灵活就业</button>
            <button type="button" class="layui-btn1 layui-btn-sm add reBtn" lay-event="retire">退休</button>
        </div>
        <!-- 操作 -->
        <div id="userBar" style="display: none;">
            <a class="layui-btn layui-btn-xs check" lay-event="edit" title="查看">
                <i class="iconfont">
                    &#xe613;
                </i>
            </a>
        </div>

    </div>


    <script src="../../layui/layui.all.js"></script>
    <script>
        var tableIns;
        layui.use(['jquery', 'element', 'layer', 'form', 'table', 'laydate',], function () {
            var $ = layui.$,
                form = layui.form,
                table = layui.table,
                layer = layui.layer,
                laydate = layui.laydate

            console.log(1);
            var iframe = document.getElementById('newAdd');
            //点击全部
            $('.all').click(function () {

                $(".all1").addClass('active');
                $(".flexWork1").removeClass('active');
                $(".retire1").removeClass('active');

            })
            //点击灵活就业
            $('.flexWork').click(function () {
                $(".flexWork1").addClass('active');
                $(".all1").removeClass('active');
                $(".retire1").removeClass('active');
            })
            //点击退休
            $('.retire').click(function () {
                $(".retire1").addClass('active');
                $(".all1").removeClass('active');
                $(".flexWork1").removeClass('active');
            })
            tableIns = table.render({
                elem: '#tableId'   //渲染的目标对象
                , url: '../../../data/dataThree.json' //数据接口
                , title: '档案详情表'//数据导出来的标题
                , height: 'full-200'
                , cellMinWidth: 80 //设置列的最小默认宽度
                , toolbar: "#toolbarTpl" //表格的工具条
                , page: 1  //是否启用分页, limits: [10, 20, 30]
                , defaultToolbar: []
                , limits: [10, 50, 100]
                , limit: 10//默认采用3
                , cols: [[   //列表数据
                    { type: "checkbox" }
                    , { field: 'id', title: '', align: 'center', hide: true }
                    , { field: 'coding', title: '档案编码', align: 'center', event: 'setCode', style: 'color:#2f81ff' }
                    , { field: 'recordname', title: '姓名', align: 'center', event: 'setName', style: 'color:#2f81ff' }
                    , { field: 'idnumber', title: '身份证号', align: 'center', event: 'setNum', style: 'color:#2f81ff' }
                    , {
                        field: 'danganzhuangtai', title: '档案类型', templet: function (d) {
                            return checkdaType(d.danganzhuangtai)
                        }, align: 'center'
                    }
                    , {
                        field: 'type', title: '档案状态', templet: function (d) {
                            return checkType(d.type)
                        }, align: 'center'
                    }
                    , { field: 'shifttime', title: '接收时间', align: 'center', }
                    , { fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center' }
                ]], done: function (res, curr, count) {
                    $('th').css({
                        'background-color': '#d3e0f4',
                    })
                }
            })

            //判断档案状态
            function checkType(type) {
                if (type == '1') {
                    return '<span style="color: green;">在库</span>'
                } else if (type == '2') {
                    return '<span style="color: red;">已借阅</span>'
                } else if (type == '3') {
                    return '<span style="color: blue;">已调出</span>'
                }
            }
            //判断档案类型
            function checkdaType(type) {
                if (type == '1') {
                    return '灵活就业'
                } else if (type == '2') {
                    return '退休'
                }
            }
            //打开查看
            function edit(data) {
                layer.open({
                    type: 2,
                    title: '查看',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1200px', '600px'],
                    content: '../comHtml/check.html'
                });
            }
            //监听行工具事件
            table.on('tool(tableId)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'edit') { //编辑
                    edit(data)
                }
                else if (layEvent === 'upda') {
                    upda(data)
                }
                else if (layEvent === 'del') {

                }
            });
            //监听头部工具栏事件
            table.on("toolbar(tableId)", function (obj) {
                switch (obj.event) {
                    case 'zaizhi':
                        add();
                        break;
                    case 'retire':
                        retire();
                        break;
                };
            })

        })

    </script>
</body>

</html>